import React, { PureComponent } from 'react';
import {
  Card,
  Table,
  Divider,
  Tag,
  Popconfirm,
  Form,
  Row,
  Col,
  Button,
  Input,
  Cascader,
  Badge,
  Select
} from 'antd';
import { connect } from 'dva';
import styles from '../People/People.less';
import { Link } from 'dva/router'; //引入link跳转
import PageHeaderLayout from '../../layouts/PageHeaderLayout'; //引入面包屑
import ListModal from './ListModal'; //修改模态框
const FormItem = Form.Item;
const Option = Select.Option;
@connect(({ employe, loading }) => ({
  employe: employe.currentEmploye,
  employeLoading: loading.effects['employe/getEmployelist'],
}))
@Form.create()

export default class Employeadd extends PureComponent {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.dispatch({
          type: 'employe/create',
          payload: values,
        });
      }
    });
  };
  handleChange = (value) => {
    console.log(`selected ${value}`);
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };
    const children = [];
    for (let i = 10; i < 36; i++) {
      children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
    }
    return (
      <PageHeaderLayout
        title="工作人员添加"
        content="工作人员添加用于增加图书馆内部工作人员，工作人员添加是数据项基本的全面信息场景。"
      >
        <Card bordered={false}>
        <Form onSubmit={this.handleSubmit}>
            <FormItem {...formItemLayout} label="id">
              {getFieldDecorator('id', {
                rules: [
                  {
                    required: true,
                    message: '请输入id',
                  },
                ],
              })(<Input placeholder="id" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="名字">
              {getFieldDecorator('name', {
                rules: [
                  {
                    required: true,
                    message: '请输入人员名字',
                  },
                ],
              })(<Input placeholder="人员名字" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="员工账户">
              {getFieldDecorator('account', {
                rules: [
                  { required: true, message: '员工账户' },
                  { validator: this.checkPhone },
                ],
              })(<Input /* addonBefore={prefixSelector} */ placeholder="员工账户" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="工号">
              {getFieldDecorator('number', {
                rules: [
                  {
                    required: true,
                    message: '工号',
                  },
                ],
              })(<Input   placeholder="工号" />)}
            </FormItem>
            <FormItem label="性别" {...formItemLayout} hasFeedback>
              {getFieldDecorator('sex', {
                rules: [{ required: true, message: '请输入性别' }],
              })( 
              <Select>
                <Option value="男">男</Option>
                <Option value="女">女</Option>
              </Select>
            )}
            </FormItem>
            <FormItem label="在线系统" {...formItemLayout} hasFeedback>
              {getFieldDecorator('tags', {
                rules: [{ required: true, message: '请输入在线系统' }],
              })( 
                <Select
                mode="multiple"
                style={{ width: '100%' }}
                placeholder="Please select"
                initialValue= {['a10', 'c12']}
                onChange={this.handleChange}
               >
                {children}
              </Select>,
            )}
            </FormItem>
            <FormItem {...formItemLayout} label="用户状态">
              {getFieldDecorator('status', {
                rules: [{ required: true, message: '用户状态!' }],
              })(
                <Select>
                  <Option value="0">关闭</Option>
                  <Option value="1">运行中</Option>
                  <Option value="2">已上线</Option>
                  <Option value="3">异常</Option>
                </Select>
              )}
            </FormItem>
            <FormItem {...tailFormItemLayout}>
              <Button type="primary" htmlType="submit">
                确定添加
              </Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderLayout>
    );
  }
}